<template>
    <div class="tab-content">
        <el-form ref="databaseFormRef" :model="databaseForm" :rules="databaseRules" label-width="150px" class="config-form">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="绿电消纳量" prop="greenPowerConsumption">
                        <el-input v-model="databaseForm.greenPowerConsumption" placeholder="请输入绿电消纳量">
                            <template #append>kWh</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="减少碳排放量" prop="carbonReduction">
                        <el-input v-model="databaseForm.carbonReduction" placeholder="请输入减少碳排放量">
                            <template #append>吨CO₂</template>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="绿电指标" prop="greenPowerIndex">
                        <el-input v-model="databaseForm.greenPowerIndex" placeholder="请输入绿电指标">
                            <template #append>%</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="绿证指标" prop="greenCertificateIndex">
                        <el-input v-model="databaseForm.greenCertificateIndex" placeholder="请输入绿证指标">
                            <template #append>张</template>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div class="save-button-container">
            <el-button type="primary" @click="saveDatabaseData">保存绿电环保配置</el-button>
        </div>
    </div>
</template>
<script lang="ts" setup>

    import { ref, reactive } from 'vue'
    import { ElMessage } from 'element-plus'
    import { updateDataClassify } from '@/api/port'


    const databaseRules = {
        greenPowerConsumption: [{ required: true, message: '绿电消纳量不能为空', trigger: 'blur' }],
        carbonReduction: [{ required: true, message: '减少碳排放量不能为空', trigger: 'blur' }],
        greenPowerIndex: [{ required: true, message: '绿电指标不能为空', trigger: 'blur' }],
        greenCertificateIndex: [{ required: true, message: '绿证指标不能为空', trigger: 'blur' }]
    }
    // 模块3: 绿电环保配置表单
    const databaseForm = ref({
        greenPowerConsumption: '', // 绿电消纳量
        carbonReduction: '', // 减少碳排放量
        greenPowerIndex: '', // 绿电指标
        greenCertificateIndex: '' // 绿证指标
    })
    const databaseFormRef = ref()
    const saveDatabaseData = async () => {
        if (!databaseFormRef.value) return
        
        try {
            await databaseFormRef.value.validate()
            await updateDataClassify({
                id: 1,
                key: 'module3',
                value: databaseForm.value

            })
            console.log('保存绿电环保配置:', databaseForm.value)

            ElMessage.success('绿电环保配置保存成功')
        } catch (error) {
            ElMessage.warning('请填写完整的表单信息')
        }
    }

    const init = async (module: any) => {
        if (module) {
            databaseForm.value = module
        }
    }

    defineExpose({
        init
    })
</script>
<style lang="less" scoped>

</style>